<template>
  <div class="home">
    <div class="banner">
      <template>
        <div class="block">
          <el-carousel height="340px">
            <el-carousel-item>
              <img src="../assets/images/banner1.jpg" class="bannerImg">
            </el-carousel-item>
            <el-carousel-item>
              <img src="../assets/images/banner2.jpg" class="bannerImg">
            </el-carousel-item>
            <el-carousel-item>
              <img src="../assets/images/banner3.jpg" class="bannerImg">
            </el-carousel-item>
            <el-carousel-item>
              <img src="../assets/images/banner4.jpg" class="bannerImg">
            </el-carousel-item>
          </el-carousel>
        </div>
      </template>
    </div>
    <div class="main">
      <div class="content">
        <div class="left">
          <div class="title">
            <a href="/study">国际游学</a>
            <span>更多</span>
          </div>
          <div class="product">
            <div class="item">
              <div class="itemLeft">
                <img src="../assets/images/product1.jpg">
              </div>
              <div class="itemRight">
                <div class="itemRl">
                  <h2>
                    <a href="#">加州洛杉矶人文体验国际营</a>
                  </h2>
                  <p>探访世界名校， 畅玩顶级乐园， 入住寄宿家庭， 这个暑假，品味地地道道的加州风情</p>
                  <h3>
                    <span>认知世界</span>
                    <span>开阔视野</span>
                    <span>体验文化差异</span>
                    <span>游览胜地</span>
                    <span>锻炼沟通能力</span>
                  </h3>
                  <h4>目的地：美国</h4>
                  <h4>适合对象：初中生,高中生</h4>
                  <h4>课程天数：21天</h4>
                </div>
                <div class="itemRr">
                  <h3>❤1289254</h3>
                  <h4>¥49460起</h4>
                  <button class="ckxq">查看详情</button>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="itemLeft">
                <img src="../assets/images/product1.jpg">
              </div>
              <div class="itemRight">
                <div class="itemRl">
                  <h2>
                    <a href="#">加州洛杉矶人文体验国际营</a>
                  </h2>
                  <p>探访世界名校， 畅玩顶级乐园， 入住寄宿家庭， 这个暑假，品味地地道道的加州风情</p>
                  <h3>
                    <span>认知世界</span>
                    <span>开阔视野</span>
                    <span>体验文化差异</span>
                    <span>游览胜地</span>
                    <span>锻炼沟通能力</span>
                  </h3>
                  <h4>目的地：美国</h4>
                  <h4>适合对象：初中生,高中生</h4>
                  <h4>课程天数：21天</h4>
                </div>
                <div class="itemRr">
                  <h3>❤1289254</h3>
                  <h4>¥49460起</h4>
                  <button class="ckxq">查看详情</button>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="itemLeft">
                <img src="../assets/images/product1.jpg">
              </div>
              <div class="itemRight">
                <div class="itemRl">
                  <h2>
                    <a href="#">加州洛杉矶人文体验国际营</a>
                  </h2>
                  <p>探访世界名校， 畅玩顶级乐园， 入住寄宿家庭， 这个暑假，品味地地道道的加州风情</p>
                  <h3>
                    <span>认知世界</span>
                    <span>开阔视野</span>
                    <span>体验文化差异</span>
                    <span>游览胜地</span>
                    <span>锻炼沟通能力</span>
                  </h3>
                  <h4>目的地：美国</h4>
                  <h4>适合对象：初中生,高中生</h4>
                  <h4>课程天数：21天</h4>
                </div>
                <div class="itemRr">
                  <h3>❤1289254</h3>
                  <h4>¥49460起</h4>
                  <button class="ckxq">查看详情</button>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="itemLeft">
                <img src="../assets/images/product1.jpg">
              </div>
              <div class="itemRight">
                <div class="itemRl">
                  <h2>
                    <a href="#">加州洛杉矶人文体验国际营</a>
                  </h2>
                  <p>探访世界名校， 畅玩顶级乐园， 入住寄宿家庭， 这个暑假，品味地地道道的加州风情</p>
                  <h3>
                    <span>认知世界</span>
                    <span>开阔视野</span>
                    <span>体验文化差异</span>
                    <span>游览胜地</span>
                    <span>锻炼沟通能力</span>
                  </h3>
                  <h4>目的地：美国</h4>
                  <h4>适合对象：初中生,高中生</h4>
                  <h4>课程天数：21天</h4>
                </div>
                <div class="itemRr">
                  <h3>❤1289254</h3>
                  <h4>¥49460起</h4>
                  <button class="ckxq">查看详情</button>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="itemLeft">
                <img src="../assets/images/product1.jpg">
              </div>
              <div class="itemRight">
                <div class="itemRl">
                  <h2>
                    <a href="#">加州洛杉矶人文体验国际营</a>
                  </h2>
                  <p>探访世界名校， 畅玩顶级乐园， 入住寄宿家庭， 这个暑假，品味地地道道的加州风情</p>
                  <h3>
                    <span>认知世界</span>
                    <span>开阔视野</span>
                    <span>体验文化差异</span>
                    <span>游览胜地</span>
                    <span>锻炼沟通能力</span>
                  </h3>
                  <h4>目的地：美国</h4>
                  <h4>适合对象：初中生,高中生</h4>
                  <h4>课程天数：21天</h4>
                </div>
                <div class="itemRr">
                  <h3>❤1289254</h3>
                  <h4>¥49460起</h4>
                  <button class="ckxq">查看详情</button>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="itemLeft">
                <img src="../assets/images/product1.jpg">
              </div>
              <div class="itemRight">
                <div class="itemRl">
                  <h2>
                    <a href="#">加州洛杉矶人文体验国际营</a>
                  </h2>
                  <p>探访世界名校， 畅玩顶级乐园， 入住寄宿家庭， 这个暑假，品味地地道道的加州风情</p>
                  <h3>
                    <span>认知世界</span>
                    <span>开阔视野</span>
                    <span>体验文化差异</span>
                    <span>游览胜地</span>
                    <span>锻炼沟通能力</span>
                  </h3>
                  <h4>目的地：美国</h4>
                  <h4>适合对象：初中生,高中生</h4>
                  <h4>课程天数：21天</h4>
                </div>
                <div class="itemRr">
                  <h3>❤1289254</h3>
                  <h4>¥49460起</h4>
                  <button class="ckxq">查看详情</button>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="itemLeft">
                <img src="../assets/images/product1.jpg">
              </div>
              <div class="itemRight">
                <div class="itemRl">
                  <h2>
                    <a href="#">加州洛杉矶人文体验国际营</a>
                  </h2>
                  <p>探访世界名校， 畅玩顶级乐园， 入住寄宿家庭， 这个暑假，品味地地道道的加州风情</p>
                  <h3>
                    <span>认知世界</span>
                    <span>开阔视野</span>
                    <span>体验文化差异</span>
                    <span>游览胜地</span>
                    <span>锻炼沟通能力</span>
                  </h3>
                  <h4>目的地：美国</h4>
                  <h4>适合对象：初中生,高中生</h4>
                  <h4>课程天数：21天</h4>
                </div>
                <div class="itemRr">
                  <h3>❤1289254</h3>
                  <h4>¥49460起</h4>
                  <button class="ckxq">查看详情</button>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="itemLeft">
                <img src="../assets/images/product1.jpg">
              </div>
              <div class="itemRight">
                <div class="itemRl">
                  <h2>
                    <a href="#">加州洛杉矶人文体验国际营</a>
                  </h2>
                  <p>探访世界名校， 畅玩顶级乐园， 入住寄宿家庭， 这个暑假，品味地地道道的加州风情</p>
                  <h3>
                    <span>认知世界</span>
                    <span>开阔视野</span>
                    <span>体验文化差异</span>
                    <span>游览胜地</span>
                    <span>锻炼沟通能力</span>
                  </h3>
                  <h4>目的地：美国</h4>
                  <h4>适合对象：初中生,高中生</h4>
                  <h4>课程天数：21天</h4>
                </div>
                <div class="itemRr">
                  <h3>❤1289254</h3>
                  <h4>¥49460起</h4>
                  <button class="ckxq">查看详情</button>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="itemLeft">
                <img src="../assets/images/product1.jpg">
              </div>
              <div class="itemRight">
                <div class="itemRl">
                  <h2>
                    <a href="#">加州洛杉矶人文体验国际营</a>
                  </h2>
                  <p>探访世界名校， 畅玩顶级乐园， 入住寄宿家庭， 这个暑假，品味地地道道的加州风情</p>
                  <h3>
                    <span>认知世界</span>
                    <span>开阔视野</span>
                    <span>体验文化差异</span>
                    <span>游览胜地</span>
                    <span>锻炼沟通能力</span>
                  </h3>
                  <h4>目的地：美国</h4>
                  <h4>适合对象：初中生,高中生</h4>
                  <h4>课程天数：21天</h4>
                </div>
                <div class="itemRr">
                  <h3>❤1289254</h3>
                  <h4>¥49460起</h4>
                  <button class="ckxq">查看详情</button>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="itemLeft">
                <img src="../assets/images/product1.jpg">
              </div>
              <div class="itemRight">
                <div class="itemRl">
                  <h2>
                    <a href="#">加州洛杉矶人文体验国际营</a>
                  </h2>
                  <p>探访世界名校， 畅玩顶级乐园， 入住寄宿家庭， 这个暑假，品味地地道道的加州风情</p>
                  <h3>
                    <span>认知世界</span>
                    <span>开阔视野</span>
                    <span>体验文化差异</span>
                    <span>游览胜地</span>
                    <span>锻炼沟通能力</span>
                  </h3>
                  <h4>目的地：美国</h4>
                  <h4>适合对象：初中生,高中生</h4>
                  <h4>课程天数：21天</h4>
                </div>
                <div class="itemRr">
                  <h3>❤1289254</h3>
                  <h4>¥49460起</h4>
                  <button class="ckxq">查看详情</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="top">
            <h2>我要预约</h2>
            <form>
              <input type="text" placeholder="姓名">
              <input type="text" placeholder="手机号">
              <input type="text" placeholder="意向课程，填课程名或编号">
              <button type="button">提交</button>
            </form>
          </div>
          <div class="bom">
            <h2>精彩回顾</h2>
            <div class="video">
              <img src="http://s.114study.com/images/admin_xly_upload/upload/xly/20180509100310669164.jpg">
              <a href="#">
                <h4>和EF英孚一起体验海外夏令营——英国篇</h4>
              </a>
            </div>
            <div class="video">
              <img src="http://s.114study.com/images/admin_xly_upload/upload/xly/20180509100310669164.jpg">
              <a href="#">
                <h4>和EF英孚一起体验海外夏令营——英国篇</h4>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
export default {
  data() {
    return {
      // list: []
    };
  },
  created() {
    // this.getData();
  },
  methods: {
    // getData() {
    //   axios.get("../../static/data.json").then(res => {
    //     console.log(res.data);
    //   });
    // }
  }
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  margin: 0 auto;
}
.banner {
  width: 80%;
  margin: 0 auto;
}
.bannerImg {
  width: 100%;
}
.main {
  width: 100%;
  background-color: #f5f5f5;
  .content {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .left {
      width: 73%;
      .title {
        height: 40px;
        width: 100%;
        background-color: #fff;
        margin-top: 20px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        line-height: 40px;
        a {
          color: #000;
          font-size: 24px;
          border-left: 4px solid #008080;
          padding-left: 10px;
        }
        span {
          font-size: 12px;
          color: #999;
          margin-right: 10px;
        }
      }
      .product {
        width: 100%;
        background-color: #fff;
        .item {
          width: 100%;
          height: 235px;
          padding: 10px;
          border-bottom: 2px solid #f5f5f5;
          display: flex;
          .itemLeft {
            width: 35%;
            height: 90%;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .itemRight {
            width: 65%;
            height: 90%;
            display: flex;
            justify-content: space-between;
            .itemRl {
              font-size: 12px;
              color: #999;
              padding-left: 20px;
              width: 65%;
              h2 {
                a {
                  color: #000;
                  font-size: 18px;
                }
              }
              p {
                margin-top: 20px;
                color: #ff9c00;
                margin-bottom: 20px;
              }
              h3 {
                span {
                  margin-right: 10px;
                  border: 1px solid #999;
                }
              }
              h4 {
                margin-top: 20px;
              }
            }
            .itemRr {
              width: 30%;
              h3 {
                font-size: 12px;
                color: #999;
              }
              h4 {
                text-align: center;
                margin-top: 60px;
                font-size: 20px;
                color: #ff4b7e;
              }
              button {
                width: 80%;
                height: 40px;
                color: #fff;
                background-color: teal;
                border: none;
                margin-top: 40px;
                border-radius: 5px;
              }
            }
          }
        }
      }
    }
    .right {
      width: 25%;
      height: 500px;
      .top {
        background-color: #fff;
        h2 {
          height: 40px;
          line-height: 40px;
          margin-top: 20px;
          margin-bottom: 20px;
          text-align: center;
          font-size: 16px;
          color: #fff;
          background-color: teal;
        }
        form {
          width: 100%;
          input {
            height: 40px;
            width: 90%;
            margin-right: 5%;
            margin-left: 5%;
            margin-bottom: 20px;
          }
          button {
            border: none;
            border-radius: 5px;
            height: 40px;
            width: 90%;
            margin-right: 5%;
            margin-left: 5%;
            margin-bottom: 30px;
            color: #fff;
            background-color: #ff9c00;
          }
        }
      }
      .bom {
        margin-top: 20px;
        background-color: #fff;
        h2 {
          height: 40px;
          line-height: 40px;
          font-size: 16px;
          padding-left: 10px;
          border-left: 6px solid teal;
        }
        .video {
          margin-top: 20px;
          margin-bottom: 20px;
          margin-right: 5%;
          margin-left: 5%;
          width: 90%;
          text-align: center;
          img {
            width: 100%;
          }
          a {
            h4 {
              margin-top: 10px;
              padding-bottom: 10px;
              font-size: 14px;
              color: #333;
            }
          }
        }
      }
    }
  }
}
</style>
